{template 'common/header'}
<ul class="nav nav-tabs">
    <li ><a href="{php echo url('sms/usergroup/list');}">通知方案列表</a></li>
    {if $id}
    <li class="active"><a href="{php echo url('sms/usergroup/post');}">修改通知方案</a></li>
    {else}
    <li class="active"><a href="{php echo url('sms/usergroup/post');}">增加通知方案</a></li>
    {/if}
</ul>
<div class="clearfix">
    <form class="form-horizontal form" action="{php echo url('sms/usergroup/post');}" method="post" id="form1">
        <input type="hidden" name="id" value="{$row['id']}" />

        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">方案名称</label>
            <div class="col-sm-5">
                <input type="text" id="titles" class="form-control" placeholder="请输入方案名称" name="title" value="{$row['title']}" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">短信项目</label>
            <div class="col-sm-5">
                <table class="table">
                    <thead>
                    <tr>
                        <th>短信项目名称</th>
                        <th style="text-align:right;">操作</th>
                    </tr>
                    </thead>
                    <tbody id="form-items-msg">
                    {loop $msgs $item}
                    <tr>
                        <td>{$item['title']} </td>
                        <td style="text-align:center;width:50px;">
                            <input type="hidden" name="msgids[]" value="{$item['id']}"/>
                            <a href="javascript:;" onclick="$(this).parent().parent().remove();" class="btn btn-default btn-sm" title="删除此条目"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>
                    {/loop}
                    </tbody>
                    <tr>
                        <td colspan="4">
                            <a href="javascript:;" onclick="$('#modal-module-msg').modal();"><i class="fa fa-plus"></i> 添加短信项目</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">接收人员</label>
            <div class="col-sm-5">
                <table class="table table-hover">
                    <thead class="navbar-inner">
                    <tr>
                        <th>名称</th>
                        <th>手机</th>
                        <th>职务</th>
                        <th style="text-align:right;">操作</th>
                    </tr>
                    </thead>
                    <tbody id="form-items">
                    {loop $selects $item}
                    <tr>
                        <td>{$item['name']} </td>
                        <td>{$item['mobile']}</td>
                        <td>{$item['worktitle']}</td>
                        <td style="text-align:center;width:50px;">
                            <input type="hidden" name="ids[]" value="{$item['id']}"/>
                            <a href="javascript:;" onclick="$(this).parent().parent().remove();" class="btn btn-default btn-sm" title="删除此条目"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>
                    {/loop}

                    </tbody>
                    <tr>
                        <td colspan="4">
                            <a href="javascript:;" onclick="$('#modal-module').modal();"><i class="fa fa-plus"></i> 添加接收人</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"></label>
            <div class="col-sm-10">
                <button type="submit" class="btn btn-primary" name="submit" value="提交">提交</button>
                <input type="hidden" name="token" value="{$_W['token']}" />
            </div>
        </div>
    </form>
</div>
<div id="modal-module-msg" class="modal  fade " role="dialog" tabindex="-1" >
    <div class="modal-dialog"  aria-hidden="true" style=" width:600px;">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择短信项目</h3>
            </div>
            <div class="modal-body" style="max-height: 300px">
                <div id="module-items-msg"></div>
            </div>

            <div class="modal-footer"><a href="#" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a></div>
        </div>
    </div>
</div>
<div id="modal-module" class="modal  fade " role="dialog" tabindex="-1" >
    <div class="modal-dialog"  aria-hidden="true" style=" width:600px;">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择短信接收人</h3>
            </div>
            <div class="modal-body" style="max-height: 300px">
                <div id="module-items"></div>
            </div>

            <div class="modal-footer"><a href="#" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function search_msg_entries() {
        var ids=getmsgids();
        $.post("{php echo url('sms/dict/query')}", {msgids:ids}, function(dat){
            $('#module-items-msg').html(dat);
        });
    }
    function getmsgids(){
        var ids=$('#form-items-msg input:hidden[name^="msgids"]').map(function () { return $(this).val(); }).get();
        return ids;
    }

    function select_msg_entry(o) {
        var html = '<tr>' +
                '<td>'+ o.title+'</td>'+
                '<td style="text-align:center;width:50px;">'+
                '<input type="hidden" name="msgids[]" value="'+ o.id+'"/>'+
                '<a onclick="$(this).parent().parent().remove();"title="删除"><i class="fa fa-times"></i></a>'+
                '</td></tr>';
        $('#form-items-msg').append(html);
    }
    require(['jquery', 'util'], function($, u){
        $("#form1").submit(function(){
        if(!$("#titles").val()) {
            u.message('方案名称为必填项，请返回修改！！', '', 'error');
            return false;
        }
        return true;
    });
        $('#modal-module-msg').on('show.bs.modal', function (e) {
            search_msg_entries();
        })
        $('#modal-module').on('show.bs.modal', function (e) {
            search_entries();
        })

    });


    function search_entries() {
        var ids=getids().join(',');
        $.post("{php echo url('sms/sendee/query')}", {ids:ids}, function(dat){
            $('#module-items').html(dat);
        });
    }
    function getids(){
        var ids=$('#form-items input:hidden[name^="ids"]').map(function () { return $(this).val(); }).get();
        return ids;
    }

    function select_entry(o) {
        var html = '<tr>' +
                '<td>'+o.name+'</td>' +
                '<td>'+ o.mobile+'</td>'+
                '<td>'+ o.worktitle+'</td>'+
                '<td style="text-align:center;width:50px;">'+
                '<input type="hidden" name="ids[]" value="'+o.id+'"/>'+
                '<a onclick="$(this).parent().parent().remove();"title="删除"><i class="fa fa-times"></i></a>'+
                '</td></tr>';
        $('#form-items').append(html);
    }
</script>
{template 'common/footer'}